<script>
import { getUserList } from '@/api/user'
export default {
    data() {
        return {
            userList: [],
            current: 1 // 表示的页码
        }
    },
    mounted() {
        // 在 vue 开发中页面的数据请求通常会放在 mounted 中
        getUserList().then(res => {
            this.userList = res.data
        })
    },
    computed: {
        tableData() {
            return this.userList.slice((this.current - 1) * 10, (this.current - 1) * 10 + 10)
        }
    }
}
</script>
<template>
    <div>
        <h5>用户列表</h5>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="序号" width="180">
                <!-- # 是 v-slot 的简写 -->
                <template #default="data">
                    <div>
                        {{ (current - 1) * 10 + 1 + data.$index }}
                    </div>
                </template>
            </el-table-column>
            <!-- prop 列要显示的字段名称 -->
            <el-table-column prop="tel" label="手机号" width="180" />
            <el-table-column prop="nickname" label="名称" />
            <el-table-column prop="telcode" label="验证码" />
        </el-table>
        <el-pagination v-model:current-page="current" background layout="prev, pager, next, jumper" :total="userList.length" />
    </div>
</template>